<template>
  <div>
    <ul class="box">
      <li v-for="item in parentList" :key="item.id">
        <div>
          <span>ID:{{ item.id }}</span>
          <input
            v-model="checkarr"
            :value="item"
            @change="changeAdd"
            class="checkbox"
            type="checkbox"
          />
        </div>
        <div class="imgbox">
          <span :class="type[item.type]">
            {{ item.type ? "下架" : "上架" }}
          </span>
          <img :src="srcList[item.num]" />
        </div>
        <h2>幼儿英语入门课程</h2>
        <div>报名费: {{ item.money }}¥</div>
        <div>销量: {{ item.sales }}</div>
        <div>上传人: {{ item.name }}</div>
        <div style="margin-bottom: 18px">上传时间: {{ item.time }}</div>
        <div class="btns">
          <el-button @click="openddialog(item)" type="primary" size="small">
            <i class="iconfont icon-shuxie"></i>编辑</el-button
          >
          <el-button type="info" size="small" @click="deleteHandler(item.id)"
            ><i class="el-icon-delete"></i>删除</el-button
          >
        </div>
      </li>
    </ul>
    <input
      @change="checkAdd"
      v-model="checkbox"
      style="margin-left: 70px"
      class="checkbox"
      type="checkbox"
    />
    <span class="sp">全选</span>
    <el-button class="sp1" type="text" @click="bathDelete">批量删除</el-button>
  </div>
</template>

<script>
import { deleteApi, bathdeleteApi } from "../../../api/courseApi";
import iconfont from "../../../assets/font_3467524_pt43urxpyjq/iconfont.css";
import one from "../../../assets/image/kecheng-picture01.png";
import two from "../../../assets/image/kecheng-picture02.png";
import three from "../../../assets/image/kecheng-picture03.png";
import four from "../../../assets/image/kecheng-picture04.png";
import five from "../../../assets/image/kecheng-picture05.png";
import six from "../../../assets/image/kecheng-picture06.png";
import seven from "../../../assets/image/kecheng-picture07.png";
import eight from "../../../assets/image/kecheng-picture08.png";
export default {
  props: ["parentList"],
  data() {
    return {
      srcList: [one, two, three, four, five, six, seven, eight],
      type: ["up", "bottom"],
      checkbox: false, //全选按钮
      checkarr: [],
    };
  },

  methods: {
    openddialog(item) {
      this.$emit("parentdialog", item);
    },
    changeAdd() {
      if (this.checkarr.length == this.parentList.length) {
        this.checkbox = true;
      } else {
        this.checkbox = false;
      }
    },
    checkAdd() {
      //全选
      if (this.checkbox) {
        this.parentList.forEach((item) => {
          this.checkarr.push(item);
        });
      } else {
        this.checkarr = [];
      }
    },
    // *批量删除
    bathDelete() {
      var idArr = this.checkarr.map((item) => item.id);
      var ids = idArr.join(",");
      bathdeleteApi({ ids: ids }).then((res) => {
        if (res.code === 200) {
          this.$emit("resetList");
          console.log(res);
          this.checkbox = false;
        }
      });
    },
    // *删除单个
    deleteHandler(id) {
      deleteApi({ id: id }).then((res) => {
        if (res.code === 200) {
          this.$emit("resetList");
          console.log(res);
        }
      });
    },
  },
};
</script>

<style lang="less" scoped>
.imgbox {
  position: relative;
  overflow: hidden;
}
.up {
  position: absolute;
  top: -6px;
  right: -26px;
  text-align: center;
  line-height: 35px;
  display: inline-block;
  width: 80px;
  height: 30px;
  font-weight: normal;
  color: #fff;
  background-color: green;
  transform: rotateZ(42deg);
}
.bottom {
  position: absolute;
  top: -3px;
  right: -27px;
  text-align: center;
  line-height: 35px;
  display: inline-block;
  width: 80px;
  height: 30px;
  font-weight: normal;
  color: #fff;
  background-color: red;
  transform: rotateZ(42deg);
}
.sp {
  font-weight: 700;
  font-size: 18px;
  margin-left: 10px;
}
.sp1 {
  font-size: 14px;
  color: #333;
  margin-left: 15px;
  font-weight: normal;
}
.checkbox {
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  border: 1px solid #33335c;
  margin-bottom: 10px;
}
.checkbox:checked {
  background: url(../../../assets/image/duihao.png) 0px 0px/100% 100%;
}
input {
  vertical-align: bottom;
}
.btns {
  display: flex;
  justify-content: space-around;
}
.box {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

li {
  box-sizing: border-box;
  width: 24%;
  background-color: #fff;
  padding: 12px;
  font-size: 16px;
  color: #333333;
  margin-bottom: 20px;
}
li div {
  font-weight: normal;
}
li h2 {
  margin: 7px 0 10px 0;
}
li input {
  float: right;
}
li img {
  width: 100%;
  height: 128px;
}
li div {
  margin-bottom: 10px;
}
</style>
